<template>
  <div>
    <el-card class="main-card">
      <el-row>
        <el-col :span="9">
          <el-input
                  placeholder="请输入菜单关键字"
                  clearable
                  v-model="queryInfo.queryString"
                  @clear="findPage"
          >
            <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="findPage"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button
                  @click="insert"
                  style="margin-left: 10px"
                  type="primary"
          >新增资讯</el-button
          >
        </el-col>
      </el-row>
      <el-table
              :data="tableList"
              stripe
              border
              highlight-current-row
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              max-height="450"
              row-key="id"
              type="index"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div v-html=" scope.row.content " v-hlzl/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="资讯标题" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="createName" label="创建人"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column prop="updateName" label="更新人"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
                    @click="updateById(scope.row)"
                    type="primary"
                    icon="el-icon-edit"
                    size="small"
            ></el-button>
            <el-button
                    type="danger"
                    @click="deleteById(scope.row.id)"
                    icon="el-icon-delete"
                    size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
                @size-change="handlePageSize"
                @current-change="handlePageNumber"
                background
                :current-page="queryInfo.pageNumber"
                :page-sizes="[8, 16, 32, 64, 128]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="open" width="60%">
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="title" label="资讯标题">
              <el-input v-model="form.title" placeholder="请输入资讯标题"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="content" label="资讯内容">
              <mavon-editor ref="md" v-model="form.content" @imgAdd="upLoadImage"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="open = false">取 消</el-button>
    <el-button type="primary" @click="clickOk">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { marked } from 'marked';
  export default {
  data() {
    return {
      // 分页查询条件
      queryInfo: {
        // 页码
        pageNumber: 1,
        // 页数
        pageSize: 8,
        // 关键字
        queryString: null,
        // 表格数据
      },
      tableList: [],
      // 总记录数
      total: 0,
      // 表单标题
      title: null,
      // 表格加载
      loading: false,
      open: false,
      form: {
        status: true,
      },
      // 表单校验规则
      rules: {
        title: [ {required: true, message: "标题不能为空", trigger: "blur"} ],
        content: [ {required: true, message: "内容不能为空", trigger: "blur"} ]
      },
    };
  },
  created() {
    this.findPage();
  },
  methods: {
    /** 分页查询 */
    findPage() {
      this.$ajax.post("/sport/findPage", this.queryInfo).then((res) => {
        console.log("菜单信息", res);
        // 回显marked 信息
        this.tableList = res.data.rows.filter(item =>{
          if( item.content && item.content !== '' ){
            item.content = marked(item.content);
            item.remark = item.content;
          }
          return true;
        });

        this.total = res.data.total;
      });
    },
    /** 页面大小改变事件 */
    handlePageSize(newPageSize) {
      this.queryInfo.pageSize = newPageSize;
      this.findPage();
    },
    /** 页面改变事件 */
    handlePageNumber(newPageNumber) {
      // 将分页参数新数据传递给pageNumber(分页参数)
      this.queryInfo.pageNumber = newPageNumber;
      this.findPage();
    },
    /** 修改事件 */
    updateById(row){
      this.title = "修改运动资讯";
      this.form = row;
      this.form.content = row.remark;
      this.open = true;
    },
    /** 新增事件 */
    insert(){
      this.title = "添加运动资讯";
      this.form = {};
      this.open = true;
    },
    /** 删除事件 */
    deleteById(id){
      this.$confirm(
              "您的操作将永久删除编号为{" + id + "}的数据, 是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
      )
              .then(() => {
                // 调后台退出接口
                this.$ajax.delete(`/sport/delete/${id}`).then((res) => {
                  this.$message.success(res.data.message);
                  this.queryInfo.pageNumber = 1;
                  this.findPage();
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
    },
    /** 确定事件 */
    clickOk(){
      //表单校验
      this.$refs.form.validate((valid) =>{
        // 不通过
        if(!valid) return this.$message.error('表单校验不通过，请检查后提交!');
        // 通过后 判断修改/新增
        if (this.form.id === undefined || this.form.id === null) {
          this.$ajax.post("/sport/insert/", this.form).then((res) => {
            this.$message.success(res.data.message);
            this.open = false;
            this.findPage();
          });
        } else {
          this.$ajax.put("/sport/update/", this.form).then((res) => {
            console.log("表单数据", this.form);
            this.$message.success(res.data.message);
            this.open = false;
            this.findPage();
          });
        }
      })
    },
    /** 富文本文件上传 */
    upLoadImage(pos, $e){
      let formData = new FormData;
      formData.append('file', $e);
      this.$ajax.post('/tool/upload', formData).then((res)=>{
        console.log(res);
        this.$refs.md.$img2Url(pos, this.$qiniu + res.data.data);
        this.$message.success(res.data.message);
      });
    }
  },
};
</script>

<style scoped></style>
